<template>
  <div class="box">
      <h2>注冊</h2>
     <div :class="{'statue':auto_s}">
         <p>字母开头,允许字母数字下划线长度5-16</p>
         <input class="selected" id="aa" type="text" placeholder="新建账号" v-model="auto" maxlength="16">
     </div>
     <div :class="{'statue':pas_new_s}">
         <p>包含写字母和数字,长度在6-16之间</p>
         <input class="selected" type="password" placeholder="设置密码" v-model="pas_new" maxlength="16">
     </div>
     <div :class="{'statue':pas_old_s}">
         <p>两次输入密码要保持一致</p>
         <input class="selected" type="password" placeholder="再次输入密码" v-model="pas_old" maxlength="16">
     </div>
     <div :class="{'statue':email_s}">
         <p>必填：暂时只支持QQ邮箱</p>
         <input class="selected" type="email" placeholder="邮箱：必填" v-model="email">
     </div>
      <div class="captcha_input">
          <input  type="text" placeholder="验证码"  v-model="captcha">
          <p class="fetch captcha" @click="fetch($event)">发送验证码</p>
      </div>
      <div class="agreement" >
          <input type="checkbox" id="agreement_i" v-model="agreement_m">
          <span @click="agreement_">我同意遵守本网站账号注册的各项协议</span>
      </div>
      <span class="enroll" @click="enroll">注册</span>

      <div class="agreement_content" v-show="agreement">
          <ul>
              <li>协议内容</li>
              <li>1.遵守各项安全协议规定</li>
              <li>2.遵守各项法律法规</li>
              <li>3.对本网站进行正当使用不进行违法犯罪活动</li>
              <li>4.目前处于开发状态，请谨慎使用</li>
              <li>*** 本网站具有最终解释权 ***</li>
          </ul>
          <button @click="agreement_">关闭</button>
      </div>
    <div class="return_" @click="return_">
       &lt; 登录
    </div>
  </div>
</template>

<script>
import api from "@/api";

export default {
    name: "Enroll",
    data(){
        return{
            time:"",
            times:5,
            index:true,
            pas:false,
            auto:"",
            pas_new:"",
            pas_old:"",
            email:"",
            captcha:"",
            auto_s:false,
            pas_new_s:false,
            pas_old_s:false,
            email_s:false,
            user:{
                password:"",
                username:"",
                email:"",
                captcha:"",
            },
            agreement:false,
            agreement_m:false,
        }
    },
    watch:{
        email(newValue,oldValue){
            let pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            this.email_s = !pattern.test(newValue);
        },
        auto(newValue,oldValue){
             let pattern = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
            this.auto_s = !pattern.test(newValue);
        },
        pas_new(newValue,oldValue){
            let pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            this.pas_new_s = !pattern.test(newValue);
        },
        pas_old(newValue,oldValue){
            let pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            if(!pattern.test(newValue) || this.pas_new !== this.pas_old){
                this.pas_old_s = true;
            }else {
                this.pas_old_s = false;
            }
        },

    },
    methods:{
        return_(){
            this.$emit("stateSwitching",1);
        },
        agreement_(){
            this.agreement = !this.agreement;
        },
        enroll(){
                 if(this.email ==="" || this.pas_new === "" || this.pas_old === "" || this.auto === "" || this.captcha===""){
                       alert("请将信息填充完整！")
                       return 0;
                 }
                 if(this.email_s || this.pas_new_s || this.pas_old_s || this.auto_s){
                     alert("信息有误，请检查！")
                     return 0;
                 }
                 if(!this.agreement_m){
                     alert("请同意本站使用协议规定！")
                 }
                 this.user.captcha = this.captcha;
                 this.user.email = this.email;
                 this.user.password = this.pas_old;
                 this.user.username = this.auto;
                 console.log(this.user)
                 api.enroll(this.user).then((res)=>{
                     if(res.data.data==="success"){
                         alert("注册成功！");
                         this.return_();
                     }else if(res.data.data==="error"){
                         alert("注册失败！");
                     }
                 })
        },
        fetch(e){
            if(this.email_s === true || this.email === ''){
                alert("邮箱为空或格式不正确！")
                return 0;
            }
            api.enrollCaptcha(this.email).then((res)=>{
                   console.log(res.data)
            })
            if(this.index){
                this.index=false;
                this.pas=!this.pas;
                clearInterval(this.time);
                this.time=setInterval(()=>{
                    e.target.innerHTML=this.times--;
                    if(this.times===0){
                        clearInterval(this.time)
                        e.target.innerHTML="发送验证码";
                        this.times=5;
                        this.index=true;
                        this.pas=!this.pas;
                    }
                },1000)
            }

        },
    }
}
</script>

<style scoped>
p{
    color: rgba(250, 7, 7, 0.6);
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 700;
}
.box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
}
h2{
    color: white;
    padding: 10px;
    font-weight: bolder;
}
input,.enroll{
    position: relative;
    text-indent: 0.5rem;
    color: white;
    font-size:0.8vw;
    height: 5.5vh;
    min-font-size: 12px;
    width: 17vw;
    min-width: 250px;
    min-height: 35px;
    outline: none;
    background: none;
    margin-bottom: 3vh;
    border: 1px solid #ffffff;
    border-radius: 3px;
    transition: all .3s;
}
.enroll{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
input::placeholder{
    color: #eadcdc;
}
.selected:hover,.enroll:hover{
    transform: scale(1.1);
    box-shadow:0 0 5px 1px #f8f3f3;
    background: rgba(220, 76, 76, 0.6);
}
.statue{
    position: relative;
}
.statue::after{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "";
    right: -10%;
    top: 50%;
    width: 30px;
    height: 30px;
    background: url("/img/common/love_no.png") no-repeat center;
    background-size: 50%;
    transform: translateY(-50%);
}
.captcha_input{
    position: relative;
}

.captcha_input input{
    height: 5.5vh;
    min-height: 40px;
    font-weight: 700;
    font-size: 1rem;
}
.fetch{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    border: 0;
    color: white;
    background: #3586f1;

}
.fetch:hover{
    cursor: pointer;
    opacity: .8;
}
.captcha{
    position: absolute;
    right: 0;
    top: 0;
    width: 5vw;
    height: 5.5vh;
    min-height: 40px;
    min-width: 70px;
    border-radius: 3px;
}
.agreement span{
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
}
.agreement span:hover{
    text-decoration: underline;
}
 #agreement_i{
    min-width: 12px;
    min-height: 12px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    margin-right: 5px;
    /*margin-top: 10px;*/
}
 .agreement_content{
     position: absolute;
     bottom: 4%;
     left: 50%;
     transform: translateX(-50%);
     height: 32vw;
     width: 300px;
     min-height: 300px;
     background: rgba(244, 247, 248, 0.9);
     display: flex;
     overflow: auto;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
 }
.agreement_content ul{
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.agreement_content ul li:nth-child(1){
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
}
.agreement_content ul li{
    width: 70%;
    padding: 5px;
}
.agreement_content button{
    border: 0;
    padding: 7px 20px;
    background: #1f9de7;
    color: white;
    border-radius: 3px;
    margin-bottom: 10px;
}
.agreement_content button:hover{
    opacity: .9;
}
.return_{
    position: absolute;
    top: 0;
    left: 0;
    color: #fcf9f9;
    font-size: 1rem;
    font-weight: 700;
}
.return_:hover{
    color: #f55b5b;
    cursor: pointer;
}
@media (min-width: 0) and (max-width: 800px) {
    input::placeholder{
        min-font-size: 15px;
    }

}
</style>